<main>
    <nav class="panel-bar justify-end">
        <div class="pull-left">
            <i></i>基本信息
        </div>
        <div class="flex-1 justify-end">
            <div class="m-r-xs flex" ng-transclude="hyFormNavExtra"></div>

            <div class="pull-right" ng-click="hideDetailFlag=!hideDetailFlag">
                <span ng-show="hideDetailFlag" title="展开"><i class="yb-icon ico-angle-double-down"></i></span>
                <span ng-show="!hideDetailFlag" title="收起"><i class="yb-icon ico-angle-double-up"></i></span>
            </div>
        </div>
    </nav>

    <section ng-show="!hideDetailFlag" ng-transclude="hyForm"></section>

    <nav class="panel-bar justify-end">
        <div class="pull-left">
            <i></i>零件信息
        </div>
        <div class="flex-1 justify-end" ng-transclude="hyTableNavExtra"></div>
    </nav>

    <div class="row wrapper-y-xs">
        <div class="col-xs-12 operate-bar font-0" ng-transclude="hyTableOperation"></div>
    </div>
    <section ng-transclude></section>
    <section class="pos-r" style="overflow: auto;" ng-transclude="hyTable"></section>
    <div class="pos-r">
        <section class="table-fixed-wrap" ng-transclude="hyTableFixed" yb-table-fixed ele-count="4" scroll-area="right" auto-height="true"></section>
    </div>
</main>
<footer class="hy-footer flex-center" ng-transclude="hyFooter"></footer>

<style>
    /* 内容区域底部 */
    .hy-footer{
        position: sticky;
        bottom: 0;
        padding: 16px;
        background-color: #fff;
    }

    hy-layout-form-extra, hy-table-nav-extra, hy-table-operation {
        border: none;   /* 移除边框 */
        padding: 0;     /* 移除内边距 */
        margin: 0;      /* 移除外边距 */
        display: contents; /* 现代浏览器支持，元素不渲染自身框 */
    }

    hy-layout-table .th-scroll-x {
        background: #eee;
    }
    
    hy-layout-table .td-scroll {
        padding-bottom: 30px;
    }
</style>